<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Form Validation</h1>
                        <small>Bootstrap includes validation styles for danger, warning, and success states on most form controls.</small>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <div class="card">
                        <div class="card-block">
                            <p>Bootstrap includes validation styles for danger, warning, and success states on most form controls.</p>

                            <br/>

                            <div class="form-group has-success">
                                <label class="form-control-label">Input with success</label>
                                <input type="text" class="form-control form-control-success" value="Vestibulum ante ipsum primis in faucibus orci luctus"/>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group has-warning">
                                <label class="form-control-label">Input with warning</label>
                                <input type="text" class="form-control form-control-warning" value="Duis at suscipit nibh. Sed nec libero non"/>
                                <i class="form-group__bar"></i>
                            </div>

                            <div class="form-group has-danger">
                                <label class="form-control-label">Input with danger</label>
                                <input type="text" class="form-control form-control-danger" value="Nam et eleifend massa. Cum sociis natoque penatibus"/>
                                <i class="form-group__bar"></i>
                            </div>

                            <br/>

                            <div class="has-success">
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input"/>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Checkbox with success</span>
                                </label>
                            </div>

                            <br/>

                            <div class="has-warning">
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input"/>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Checkbox with warning</span>
                                </label>
                            </div>

                            <br/>

                            <div class="has-danger">
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input"/>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Checkbox with danger</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                
            </div></template>